<template>
  <div class="dashboard-container">
    <div class="question-container">
      <el-card shadow="always" class="box-card" >
        <el-row type="flex" class="btn-wrapper" justify="space-between">
          <el-col class="data-info" :span="6"><span>说明：目前支持学科和关键字条件筛选</span></el-col>
          <el-col :span="1.5"> <el-button type="success" size="small" @click="$router.push('/questions/new')"><i class="el-icon-edit" />新增试题</el-button></el-col>
        </el-row>
        <question-form @search="search" @clear="clear" />
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="待审核" name="waiting" />
          <el-tab-pane label="已审核" name="reviewed" />
          <el-tab-pane label="已拒绝" name="rejected" />
        </el-tabs>
        <el-alert
          show-icon
          :title="`数据一共 ${counts} 条`"
          type="info"
          :closable="false"
        />
        <el-table
          ref="singleTable"
          :data="list"
          style="width: 100%"
        >
          <el-table-column
            label="试题编号"
            width="120"
            prop="number"
          />
          <el-table-column
            prop="subject"
            label="学科"
            width="120"
          />
          <el-table-column
            prop="catalog"
            label="目录"
            width="120"
          />
          <el-table-column prop="questionType" label="题型" width="120">
            <template #default="{row}">
              <span>{{ questionType[row.questionType] }}</span>
            </template>
          </el-table-column>

          <el-table-column label="题干" width="280" prop="question">
            <template #default="{row}">
              <span v-html="row.question" />
            </template>
          </el-table-column>>

          <el-table-column prop="addDate" label="录入时间" width="180">
            <template #default="{row}">
              <span>{{ formateDate(row.addDate) }}</span>
            </template></el-table-column>

          <el-table-column prop="difficulty" label="难度" width="80">
            <template #default="{row}">
              <span>{{ difficulty[row.difficulty] }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="creator" label="录入人" width="120" />

          <el-table-column prop="chkState" label="审核状态" width="120">
            <template #default="{row}">
              <span>{{ chkState[row.chkState] }}</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="chkRemarks"
            label="审核意见"
            width="150"
          />
          <el-table-column
            prop="chkUser"
            label="审核人"
            width="120"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template #default="{row}">
              <el-button type="text" size="small" @click="review(row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="!!row.chkState" @click="checkDialog(row.id)">审核</el-button>
              <el-button type="text" size="small" :disabled="!!row.publishState" @click="$router.push({path:'/questions/new',query:{id:row.id}})">修改</el-button>
              <el-button type="text" size="small" @click="addOff(row.id,!row.publishState)">{{ row.publishState === 0 ? '上架':'下架' }}</el-button>
              <el-button type="text" size="small" :disabled="!!row.publishState" @click="deleteQe(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row>
          <el-col :span="5" :offset="17">
            <div class="block" style="margin-left: 30px;">
              <el-pagination
                background
                :current-page="params.page"
                :page-size="+params.pagesize"
                :total="+counts"
                :page-sizes="[5,10,20,50]"
                layout="prev, pager, next,sizes, jumper"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                style="margin-top: 20px;"
              />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 预览弹窗 -->
    <questions-preview :detail="detail" :dialog-visible="dialogVisible" @close="handleClose" />

    <!-- 审核弹窗 -->
    <el-dialog title="题目审核" :visible="dialogFormVisible" width="400px">
      <el-form :model="form">
        <el-form-item>
          <template>
            <el-radio v-model="form.chkState" :label="1">通过</el-radio>
            <el-radio v-model="form.chkState" :label="2">拒绝</el-radio>
          </template>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.chkRemarks" size="small" type="textarea" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="check()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import questionForm from '@/module-hmmm/components/question-form.vue'
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
import dayjs from 'dayjs'
import { choice, detail, choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  components: {
    questionForm,
    questionsPreview
  },
  data () {
    return {
      // 预览弹窗的显示和隐藏
      dialogVisible: false,
      // 审核弹窗的显示和隐藏
      dialogFormVisible: false,
      // 审核弹窗表单
      form: {
        chkState: 1,
        chkRemarks: '',
        id: undefined
      },
      // 分页参数
      params: {
        page: 1, // 页码
        pagesize: 5 // 每页数据
      },
      // 请求数据统计
      counts: 0,
      // 表格数据
      list: [],
      // 表单数据
      formData: {},
      // 当前活动项
      activeName: 'all',
      // 题干枚举
      questionType: {
        1: '单选',
        2: '多选',
        3: '简单'
      },
      // 难度枚举
      difficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 审核状态枚举
      chkState: {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      },
      // 按钮枚举
      btnSwitch: {
        all: {},
        waiting: { chkState: 0 },
        reviewed: { chkState: 1 },
        rejected: { chkState: 2 }
      },
      // 题目详情
      detail: {}
    }
  },
  created () {
    this.getQuestionList()
  },

  methods: {
    // 获取精选列表
    async getQuestionList () {
      // 调用接口
      const res = await choice({ ...this.params, ...this.btnSwitch[this.activeName], ...this.formData })
      // console.log(res)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    // 切换按钮
    handleClick () {
      // console.log(this.activeName)
      this.getQuestionList()
    },

    // 预览
    review (id) {
      // console.log(id)
      // 获取题目详情
      this.getQuestionDetail(id)
      // 打开弹窗
      this.dialogVisible = true
    },

    // 格式化时间
    formateDate (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 每页数据变动
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getQuestionList()
    },
    // 页码变动
    handlePageChange (val) {
      // console.log(`当前页: ${val}`)
      this.params.page = val
      this.getQuestionList()
    },
    // 添加搜索条件
    search (obj) {
      this.formData = obj
      // 重置页码
      this.params.page = 1
      // 刷新列表
      this.getQuestionList()
    },
    // 清空搜索条件
    clear () {
      this.formData = {}
      // 刷新列表
      this.getQuestionList()
    },
    // 获取题目详情
    async getQuestionDetail (id) {
      const { data: res } = await detail({ id })
      // console.log(res)
      this.detail = res
    },
    // 子传父 关闭弹窗
    handleClose () {
      this.dialogVisible = false
    },
    // 打开审核弹窗
    checkDialog (id) {
      this.form.id = id
      this.dialogFormVisible = true
    },
    // 审核提交
    async check () {
      // 关闭弹窗
      this.dialogFormVisible = false
      // 调用接口
      await choiceCheck(this.form)
      this.$message.success('操作成功')
      // 刷新列表
      this.getQuestionList()
    },

    // 精选题库上下架
    addOff (id, publishState) {
      // 询问用户
      this.$confirm('您确认上架这道题目吗?', '提示', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 判断当前是上架还是下架
        const message = publishState ? '上架成功' : '下架成功'
        publishState = publishState ? 1 : 0
        // 调用上下架接口
        await choicePublish({ id, publishState })
        // 提示用户
        this.$message.success(message)
        // 刷新列表
        this.getQuestionList()
      })
    },
    // 精选题库删除
    deleteQe (id) {
      // 询问用户
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        comfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        // 提示用户
        this.$message.success('删除成功')
        // 刷新列表
        this.getQuestionList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-info {
    font-size: 12px;
    color:pink
  }

  .question-container {
    padding: 0 10px;
    margin: 10px 0;
  }

  .btn-wrapper {
    font-size: 12px;
    margin-bottom: 20px;
  }

</style>
